<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台管理系统</title>
  <!-- 引入 Bootstrap 5 CSS -->
  <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
  <!-- 引入 Font Awesome 图标 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <style>
    /* 基础样式 */
    body {
      font-family: 'Segoe UI', sans-serif;
      overflow-x: hidden;
    }

    /* 侧边栏样式 */
    .sidebar {
      min-height: 100vh;
      width: 250px;
      background-color: #2c3e50;
      color: white;
      transition: all 0.3s ease;
    }
    .sidebar.collapsed {
      width: 80px;
    }
    .sidebar .nav-link {
      color: rgba(255, 255, 255, 0.8);
      padding: 1rem 1.5rem;
      transition: all 0.2s;
    }
    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: #34495e;
      color: white;
    }
    .sidebar .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
    }
    .sidebar.collapsed .nav-text {
      display: none;
    }
    .sidebar.collapsed .nav-link {
      padding: 1rem;
      text-align: center;
    }
    .sidebar.collapsed .nav-link i {
      margin-right: 0;
      font-size: 1.2rem;
    }

    /* 主内容区样式 */
    .main-content {
      flex: 1;
      transition: all 0.3s ease;
    }
    .sidebar.collapsed ~ .main-content {
      margin-left: 80px;
    }

    /* 顶部导航样式 */
    .top-nav {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      z-index: 100;
    }

    /* 数据卡片样式 */
    .stat-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* 上传按钮样式 */
    .upload-btn-wrapper {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }
    .upload-btn-wrapper input[type=file] {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="d-flex">
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
      <div class="p-4 border-bottom d-flex align-items-center justify-content-between">
        <h3 class="nav-text mb-0">管理系统</h3>
        <button class="btn text-white" id="toggleSidebar">
          <i class="fa fa-bars"></i>
        </button>
      </div>
      <ul class="nav flex-column mt-3">
        <li class="nav-item">
          <a class="nav-link active" href="#dashboard">
            <i class="fa fa-dashboard"></i>
            <span class="nav-text">仪表盘</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#users">
            <i class="fa fa-users"></i>
            <span class="nav-text">用户管理</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#products">
            <i class="fa fa-shopping-bag"></i>
            <span class="nav-text">产品管理</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#orders">
            <i class="fa fa-file-text-o"></i>
            <span class="nav-text">订单管理</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#settings">
            <i class="fa fa-cog"></i>
            <span class="nav-text">系统设置</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- 主内容区 -->
    <div class="main-content ms-0 ms-md-250">
      <!-- 顶部导航 -->
      <nav class="top-nav py-3 px-4 d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
          <button class="btn me-3 d-md-none" id="mobileToggle">
            <i class="fa fa-bars"></i>
          </button>
          <h5 class="mb-0">仪表盘</h5>
        </div>
        <div class="d-flex align-items-center">
          <div class="me-3 position-relative">
            <i class="fa fa-bell-o text-secondary"></i>
            <span class="position-absolute top-0 right-0 w-2 h-2 bg-danger rounded-circle"></span>
          </div>
          <div class="d-flex align-items-center">
            <img src="https://picsum.photos/id/1005/40/40" class="rounded-circle me-2" width="40" height="40" alt="用户头像">
            <span class="d-none d-md-inline">管理员</span>
          </div>
        </div>
      </nav>

      <!-- 页面内容 -->
      <div class="p-4">
        <!-- 数据统计卡片 -->
        <div class="row mb-4">
          <div class="col-md-3 mb-3">
            <div class="stat-card bg-primary text-white p-4 rounded-3">
              <div class="d-flex justify-content-between">
                <div>
                  <p class="mb-1">总用户</p>
                  <h3 class="mb-0">2,541</h3>
                </div>
                <i class="fa fa-users fa-2x"></i>
              </div>
              <div class="mt-2 text-sm">
                <span class="text-success"><i class="fa fa-arrow-up"></i> 5.2%</span> 较上月
              </div>
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <div class="stat-card bg-success text-white p-4 rounded-3">
              <div class="d-flex justify-content-between">
                <div>
                  <p class="mb-1">总订单</p>
                  <h3 class="mb-0">1,892</h3>
                </div>
                <i class="fa fa-file-text-o fa-2x"></i>
              </div>
              <div class="mt-2 text-sm">
                <span class="text-white"><i class="fa fa-arrow-up"></i> 12.8%</span> 较上月
              </div>
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <div class="stat-card bg-warning text-white p-4 rounded-3">
              <div class="d-flex justify-content-between">
                <div>
                  <p class="mb-1">总收入</p>
                  <h3 class="mb-0">¥35,621</h3>
                </div>
                <i class="fa fa-money fa-2x"></i>
              </div>
              <div class="mt-2 text-sm">
                <span class="text-white"><i class="fa fa-arrow-up"></i> 8.5%</span> 较上月
              </div>
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <div class="stat-card bg-info text-white p-4 rounded-3">
              <div class="d-flex justify-content-between">
                <div>
                  <p class="mb-1">转化率</p>
                  <h3 class="mb-0">12.5%</h3>
                </div>
                <i class="fa fa-exchange fa-2x"></i>
              </div>
              <div class="mt-2 text-sm">
                <span class="text-danger"><i class="fa fa-arrow-down"></i> 1.2%</span> 较上月
              </div>
            </div>
          </div>
        </div>

        <!-- 上传区域和表格 -->
        <div class="row">
          <!-- 左侧上传区域 -->
          <div class="col-md-4 mb-4">
            <div class="card p-4 h-100">
              <h5 class="card-title mb-4">文件上传</h5>

              <!-- 单文件上传 -->
              <div class="mb-4">
                <label class="form-label">上传用户头像</label>
                <div class="upload-btn-wrapper">
                  <button class="btn btn-outline-primary w-100">
                    <i class="fa fa-upload me-2"></i>选择图片
                  </button>
                  <input type="file" accept="image/*" id="avatarUpload" />
                </div>
                <div class="mt-3" id="avatarPreview" style="display: none;">
                  <img src="" alt="预览图" class="img-thumbnail" width="100%">
                </div>
              </div>

              <!-- 多文件上传 -->
              <div class="mb-4">
                <label class="form-label">批量上传产品图片</label>
                <div class="upload-btn-wrapper">
                  <button class="btn btn-outline-secondary w-100">
                    <i class="fa fa-files-o me-2"></i>选择多个文件
                  </button>
                  <input type="file" accept="image/*" multiple id="productUpload" />
                </div>
                <div class="mt-3" id="fileList"></div>
              </div>

              <!-- 上传按钮 -->
              <button class="btn btn-success w-100" id="submitUpload">
                <i class="fa fa-check me-2"></i>确认上传
              </button>
            </div>
          </div>

          <!-- 右侧数据表格 -->
          <div class="col-md-8">
            <div class="card">
              <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">最近订单</h5>
                <button class="btn btn-sm btn-outline-primary">
                  <i class="fa fa-download me-1"></i>导出数据
                </button>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th>订单编号</th>
                        <th>用户</th>
                        <th>金额</th>
                        <th>状态</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>ORD-2023-001</td>
                        <td>张三</td>
                        <td>¥299.00</td>
                        <td><span class="badge bg-success">已完成</span></td>
                        <td>
                          <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i></button>
                          <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                        </td>
                      </tr>
                      <tr>
                        <td>ORD-2023-002</td>
                        <td>李四</td>
                        <td>¥599.00</td>
                        <td><span class="badge bg-warning">处理中</span></td>
                        <td>
                          <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i></button>
                          <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                        </td>
                      </tr>
                      <tr>
                        <td>ORD-2023-003</td>
                        <td>王五</td>
                        <td>¥1299.00</td>
                        <td><span class="badge bg-danger">已取消</span></td>
                        <td>
                          <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i></button>
                          <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                        </td>
                      </tr>
                      <tr>
                        <td>ORD-2023-004</td>
                        <td>赵六</td>
                        <td>¥89.00</td>
                        <td><span class="badge bg-primary">已付款</span></td>
                        <td>
                          <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i></button>
                          <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i></button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <!-- 分页 -->
                <nav class="mt-3">
                  <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                      <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#">下一页</a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入 Bootstrap 5 JS 和 Popper -->
  <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
  <script>
    // 侧边栏切换功能
    document.getElementById('toggleSidebar').addEventListener('click', function() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('collapsed');
    });

    // 移动端侧边栏切换
    document.getElementById('mobileToggle').addEventListener('click', function() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('collapsed');
    });

    // 头像上传预览
    document.getElementById('avatarUpload').addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
          const preview = document.getElementById('avatarPreview');
          preview.querySelector('img').src = event.target.result;
          preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
      }
    });

    // 多文件上传列表展示
    document.getElementById('productUpload').addEventListener('change', function(e) {
      const files = e.target.files;
      const fileList = document.getElementById('fileList');
      fileList.innerHTML = ''; // 清空现有列表

      if (files.length > 0) {
        const list = document.createElement('ul');
        list.className = 'list-group';
        for (let i = 0; i < files.length; i++) {
          const item = document.createElement('li');
          item.className = 'list-group-item d-flex justify-content-between align-items-center';
          item.innerHTML = `
            <span><i class="fa fa-file-image-o me-2"></i>${files[i].name}</span>
            <span class="badge bg-secondary">${(files[i].size / 1024).toFixed(1)}KB</span>
          `;
          list.appendChild(item);
        }
        fileList.appendChild(list);
      }
    });

    // 上传按钮点击事件
    document.getElementById('submitUpload').addEventListener('click', function() {
      // 模拟上传成功提示
      const toast = new bootstrap.Toast(document.createElement('div'));
      toast._element.className = 'toast text-white bg-success position-fixed bottom-4 right-4';
      toast._element.innerHTML = `
        <div class="d-flex">
          <div class="toast-body">文件上传成功！</div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
      `;
      document.body.appendChild(toast._element);
      toast.show();
    });
  </script>
</body>
</html>